<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>基于LayIM消息通讯系统</title>

  <link href="layui/css/layui.css" rel="stylesheet">
  <style>
    html {
      padding: 32px;
    }
  </style>
</head>
<body>

<div class="layui-container">
  <blockquote class="layui-elem-quote">
    LayIM 是一套面向网页端聊天系统（WebIM）的纯静态主题，其包含的只是一套前端 UI（界面）和相关的模拟示例，没有后端程序及数据库存储等服务。
  </blockquote>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 52px;">
    <legend>请输入用户ID，模拟用户上线</legend>
  </fieldset>

  <form class="layui-form" action="" lay-filter="example">
    <div class="layui-form-item">
      <label class="layui-form-label">用户ID</label>
      <div class="layui-input-block">
        <input type="text" name="userId" lay-verify="required|title" autocomplete="off" placeholder="请输入用户ID"
               class="layui-input" id="userId">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <!--        <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>-->
        <!--        <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>-->
        <!--        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>-->

        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="LAY-component-form-submit">登录
        </button>
      </div>
    </div>
  </form>


  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 52px;">
    <legend>面板外的操作示例</legend>
  </fieldset>

  <div class="layui-btn-container" id="LAY-layim-demo">
    <button class="layui-btn layui-btn-primary" data-type="chat">自定义会话</button>
    <button class="layui-btn layui-btn-primary" data-type="message">接受好友的消息</button>
    <button class="layui-btn layui-btn-primary" data-type="messageAudio">接受音频消息</button>
    <button class="layui-btn layui-btn-primary" data-type="messageVideo">接受视频消息</button>
    <button class="layui-btn layui-btn-primary" data-type="messageTemp">接受临时会话消息</button>

    <button class="layui-btn layui-btn-primary" data-type="add">申请好友</button>
    <button class="layui-btn layui-btn-primary" data-type="addqun">申请加群</button>
    <button class="layui-btn layui-btn-primary" data-type="addFriend">同意好友</button>
    <button class="layui-btn layui-btn-primary" data-type="addGroup">增加群组到主面板</button>
    <button class="layui-btn layui-btn-primary" data-type="removeFriend">删除主面板好友</button>
    <button class="layui-btn layui-btn-primary" data-type="removeGroup">删除主面板群组</button>

    <button class="layui-btn layui-btn-primary" data-type="setGray">置灰离线好友</button>
    <button class="layui-btn layui-btn-primary" data-type="unGray">取消好友置灰</button>
    <button class="layui-btn layui-btn-primary" style="border-color: #3FDD86; color: #3FDD86;" data-type="mobile">WAP
      版演示
    </button>
  </div>

</div>

<script src="layui/layui.js"></script>
<script>
  if (!/^http(s*):\/\//.test(location.href)) {
    alert('请通过 localhost 访问该页面');
  }

  layui.config({
    layimPath: '../layim/' //配置 layim.js 所在目录
    , layimAssetsPath: '../layim/assets/' //layim 资源文件所在目录
    , version: '3.9.8'
  }).extend({
    layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
  }).use(['form', 'util', 'layim'], function () { //加载组件

    var layim = layui.layim;

    var form = layui.form;

    //表单赋值
    form.val('example', JSON.parse(sessionStorage.getItem("loginForm")));

    // 自动登录
    if (form.validate('#userId')) {
      var data = form.val('example');
      login(data);
    }

    //提交事件
    form.on('submit(demo1)', function (data) {
      if (sessionStorage.getItem("loginState") === "true") {
        layer.msg("账号已经登录！", {
          time: 5000
        });
      } else {
        login(data.field);
      }
      return false;
    });

    function login(data) {
      //基础配置
      layim.config({
        //初始化接口
        init: {
          url: '/open/chat/server/getList'
          , data: data
          , result: {
            code: 200
            , msgKey: 'message'
          }
          , fail: function (res) {
            sessionStorage.removeItem("loginForm")
            sessionStorage.removeItem("loginState");
            layer.msg(res.message, {
              time: 5000
            });
          }
        }

        //查看群员接口
        , members: {
          url: ''
          , data: {}
        }

        //上传图片接口
        , uploadImage: {
          url: '' //（返回的数据格式见下文）
          , type: '' //默认post
        }

        //上传文件接口
        , uploadFile: {
          url: '' //（返回的数据格式见下文）
          , type: '' //默认post
        }

        , isAudio: true
        , isVideo: true

        //扩展工具栏
        , tool: [{
          alias: 'code'
          , title: '代码'
          , icon: '&#xe64e;'
        }]

        // 更多参数见 layim 文档

        , msgbox: layui.cache.layimAssetsPath + 'html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
        , find: layui.cache.layimAssetsPath + 'html/find.html' //发现页面地址，若不开启，剔除该项即可
        , chatLog: layui.cache.layimAssetsPath + 'html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可

      });

      var socket = new WebSocket('ws://localhost:10000/chat?authorization=test&userId=' + data.userId);

      // 缓存登录信息
      sessionStorage.setItem("loginForm", JSON.stringify(data));
      sessionStorage.setItem("loginState", "true");

      //事件 - 在线状态的切换事件
      layim.on('online', function (data) {
        //console.log(data);
      });

      //事件 - 签名修改
      layim.on('sign', function (value) {
        //console.log(value);
      });

      //事件 - 自定义工具栏点击，以添加代码为例
      layim.on('tool(code)', function (insert) {
        layer.prompt({
          title: '插入代码'
          , formType: 2
          , shade: 0
        }, function (text, index) {
          layer.close(index);
          insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
        });
      });

      //事件 - layim建立就绪
      layim.on('ready', function (res) {

        //console.log(res.mine);

        // layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得

        // //连接成功时触发
        // socket.onopen = function () {
        //   socket.send('XXX连接成功');
        // };

        // 监听收到的消息
        socket.onmessage = function (res) {
          //res为接受到的值，如 {"emit": "messageName", "data": {}}
          //emit即为发出的事件名，用于区分不同的消息
          //好友的消息
          var message = JSON.parse(res.data);

          console.log('接收消息： ', message);

          if (message.type === 'SYSTEM_NOTIFICATION') {
            /// TODO 消息撤回
          } else {
            layim.getMessage(message);
          }

        };

        // 监听连接关闭
        socket.onclose = function (e) {
          console.log('disconnected: ', e);
        }

        // 监听异常信息
        socket.onerror = function (e) {
          console.log('Error : ' + e.message);
        }

      });

      //事件 - 发送消息
      layim.on('sendMessage', function (data) {
        console.log(data);
        // 发送消息到服务器
        socket.send(JSON.stringify({
          type: 'friend' //随便定义，用于在服务端区分消息类型
          , data: data
        }));
      });

      //事件 - 查看群员
      layim.on('members', function (data) {
        //console.log(data);
      });

      //事件 - 聊天窗口的切换
      layim.on('chatChange', function (res) {
        var type = res.data.type;
        //console.log(res.data.id)
        if (type === 'friend') {
          //模拟标注好友状态
          //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
        } else if (type === 'group') {
          //模拟系统消息
          layim.getMessage({
            system: true
            , id: res.data.id
            , type: "GROUP"
            , content: '模拟群员' + (Math.random() * 100 | 0) + '加入群聊'
          });
        }
      });

      //事件 - 更换背景
      layim.on('setSkin', function (filename, src) {
        console.log(filename)
      });

      // 面板外的操作示例事件
      layui.use('util', function (util) {
        util.on('data-type', {
          chat: function () {
            //自定义会话
            layim.chat({
              name: '小测试'
              , type: 'friend'
              , avatar: '//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
              , id: 1008612
            });
            layer.msg('即：会话对象不必非要在右下角主面板中');
          }
          , message: function () {
            //制造好友消息
            layim.getMessage({
              username: "测试1"
              , avatar: "//unpkg.com/outeres/demo/avatar/0.png"
              , id: "100001"
              , type: "friend"
              , content: "这是一条测试内容。演示标记：" + new Date().getTime()
              , timestamp: new Date().getTime()
            });
          }
          , messageAudio: function () {
            //接受音频消息
            layim.getMessage({
              username: "测试1"
              , avatar: "//unpkg.com/outeres/demo/avatar/0.png"
              , id: "100001"
              , type: "friend"
              , content: "audio[//unpkg.com/outeres/audio/test.mp3]"
              , timestamp: new Date().getTime()
            });
          }
          , messageVideo: function () {
            //接受视频消息
            layim.getMessage({
              username: "测试1"
              , avatar: "//unpkg.com/outeres/demo/avatar/0.png"
              , id: "100001"
              , type: "friend"
              , content: "video[http://www.w3school.com.cn//i/movie.ogg]"
              , timestamp: new Date().getTime()
            });
          }
          , messageTemp: function () {
            //接受临时会话消息
            layim.getMessage({
              username: "测试X"
              , avatar: "//unpkg.com/outeres/demo/avatar/0.png"
              , id: "198909151014"
              , type: "friend"
              , content: "临时：" + new Date().getTime()
            });
          }
          , add: function () {
            //实际使用时数据由动态获得
            layim.add({
              type: 'friend'
              , username: '测试Y'
              , avatar: '//unpkg.com/outeres/demo/avatar/0.png'
              , submit: function (group, remark, index) {
                layer.msg('好友申请已发送，请等待对方确认', {
                  icon: 1
                  , shade: 0.5
                }, function () {
                  layer.close(index);
                });

                //通知对方
                /*
                $.post('/im-applyFriend/', {
                  uid: info.uid
                  ,from_group: group
                  ,remark: remark
                }, function(res){
                  if(res.status != 0){
                    return layer.msg(res.msg);
                  }

                  layer.msg('好友申请已发送，请等待对方确认', {
                    icon: 1
                    ,shade: 0.5
                  }, function(){
                    layer.close(index);
                  });
                });
                */
              }
            });
          }
          , addqun: function () {
            layim.add({
              type: 'group'
              , username: '测试群组1'
              , avatar: '//unpkg.com/outeres/demo/avatar/0.png'
              , submit: function (group, remark, index) {
                layer.msg('申请已发送，请等待管理员确认', {
                  icon: 1
                  , shade: 0.5
                }, function () {
                  layer.close(index);
                });

                //通知对方
                /*
                $.post('/im-applyGroup/', {
                  uid: info.uid
                  ,from_group: group
                  ,remark: remark
                }, function(res){

                });
                */
              }
            });
          }
          , addFriend: function () {
            var user = {
              type: 'friend'
              , id: 1234560
              , username: '测试A' //好友昵称，若申请加群，参数为：groupname
              , avatar: '//unpkg.com/outeres/demo/avatar/0.png' //头像
              , sign: '测试内容'
            }
            layim.setFriendGroup({
              type: user.type
              , username: user.username
              , avatar: user.avatar
              , group: layim.cache().friend //获取好友列表数据
              , submit: function (group, index) {
                //一般在此执行Ajax和WS，以通知对方已经同意申请
                //……

                //同意后，将好友追加到主面板
                layim.addList({
                  type: user.type
                  , username: user.username
                  , avatar: user.avatar
                  , groupid: group //所在的分组id
                  , id: user.id //好友ID
                  , sign: user.sign //好友签名
                });

                layer.close(index);
              }
            });
          }
          , addGroup: function () {
            layer.msg('已成功把[测试群组33]添加到群组里', {
              icon: 1
            });
            //增加一个群组
            layim.addList({
              type: 'group'
              , avatar: "//unpkg.com/outeres/demo/avatar/0.png"
              , groupname: '测试群组33'
              , id: "12333333"
              , members: 0
            });
          }
          , removeFriend: function () {
            layer.msg('已成功删除[测试2]', {
              icon: 1
            });
            //删除一个好友
            layim.removeList({
              id: 100001222
              , type: 'friend'
            });
          }
          , removeGroup: function () {
            layer.msg('已成功删除[测试群组33]', {
              icon: 1
            });
            //删除一个群组
            layim.removeList({
              id: 12333333
              , type: 'group'
            });
          }
          //置灰离线好友
          , setGray: function () {
            layim.setFriendStatus(168168, 'offline');

            layer.msg('已成功将好友[测试4]置灰', {
              icon: 1
            });
          }
          //取消好友置灰
          , unGray: function () {
            layim.setFriendStatus(168168, 'online');

            layer.msg('成功取消好友[测试4]置灰状态', {
              icon: 1
            });
          }
          //移动端版本
          , mobile: function () {
            var device = layui.device();
            var mobileHome = 'mobile.html';
            if (device.android || device.ios) {
              return location.href = mobileHome;
            }
            var index = layer.open({
              type: 2
              , title: '移动版演示'
              , content: mobileHome
              , area: ['375px', '667px']
              , shadeClose: true
              , scrollbar: false
              , shade: 0.8
              , end: function () {
                layer.close(index + 2);
              }
            });
          }
        });
      });
    }

  });
</script>
</body>
</html>
